<template>
  <div>
    <ul>
      <li v-for="msg in messageList" :key="msg.id">
        <!-- 跳转路由并携带params参数，to的字符串写法 -->
        <!-- <router-link :to="`/home/message/details?id=${msg.id}&title=${msg.title}`" >{{msg.title}}</router-link> -->
        <!-- <router-link :to="`/home/message/details/${msg.id}/${msg.title}`" >{{msg.title}}</router-link> -->

        <!-- 跳转路由并携带params参数，to的对象写法 -->
        <!-- path: '/home/message/details'  不被支持 -->
         <!-- 主要是因为params模式下，路由器解析url时，会根据'/'进行截取参数，会造成截取错误参数 -->
        <router-link :to="{
          name: 'xiangqing',
          params: {
            id: msg.id,
            title: msg.title
          }
        }" >
          {{msg.title}}
        </router-link>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'Message',
    data() {
      return {
        messageList: [
          {id: '001', title: '消息001'},
          {id: '002', title: '消息002'},
          {id: '003', title: '消息003'}
        ]
      }
    }
  };
</script>

<style>
</style>